<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
 <head>
  <title>inputEx - Form from JsonSchema example</title>

<!-- YUI CSS -->
<link rel="stylesheet" type="text/css" href="../lib/yui/reset-fonts/reset-fonts.css">
<link rel="stylesheet" type="text/css" href="../lib/yui/container/assets/container.css"> 
<link rel="stylesheet" type="text/css" href="../lib/yui/assets/skins/sam/skin.css">

<!-- InputEx CSS -->
<link type='text/css' rel='stylesheet' href='../css/inputEx.css' />

<!-- Demo CSS -->
<link rel="stylesheet" type="text/css" href="css/demo.css"/>
<link rel="stylesheet" type="text/css" href="css/dpSyntaxHighlighter.css">

 </head>

<body class="yui-skin-sam">
	

<h1>inputEx - form from a JsonSchema</h1>

<!-- Example 1 -->
<div class='exampleDiv'>
	<h2>Create a form from a json-schema</h2>
	<p>Instantiate a inputEx.JsonSchema.Builder object, configure the schemaIdentifierMap (Hash of json-schema definitions) and call the <i>schemaToInputEx</i> method to get the inputEx definition.</p>
	<div class='demoContainer' id='container1'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
// Create a schemaIdentifierMap 
var schemaIdentifierMap = {
 // Person definition
 "Person": {
	"id": "Person",
	"description":"A person",
 	"type":"object",
 	"properties": {
  		"name": { "type":"string"},
    	"born" : { "type":"string", "format":"date", "optional":true},
    	"gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
		"grownup": { "type": "boolean" },
		"favoritecolors": { "type": "array" },
    	"address": { 
			"type":"object",
      		"properties":{
      			"street":{"type":"string"},
        		"city":{"type":"string"},
        		"state":{"type":"string"}
      		}
    	}
  	}
 }
};

// Create the JsonSchema builder object
var builder = new inputEx.JsonSchema.Builder({
	'schemaIdentifierMap': schemaIdentifierMap
});

// Get the inputEx field definition from the "Person" object
var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]);

// Add 'container1' as parent element
inputExDefinition.parentEl = 'container1';

// Create the form
var f = inputEx(inputExDefinition);
		</textarea>
	</div>
</div>
	


<!-- Example 2 -->
<div class='exampleDiv'>
	<h2>Overriding inputEx options</h2>
	<p>Use the <i>"_inputEx"</i> attribute on json-schema properties. This object will override inputEx' default properties in the field definition. You may also override the inputEx type through the <i>"_type"</i> attribute.</p>
	<div class='demoContainer' id='container2'></div>
	<div class='codeContainer'>
		<textarea name="code" class="JScript">
// Create a schemaIdentifierMap 
var schemaIdentifierMap = {
 // Person definition
 "Person": {
	"id": "Person",
	"description":"A person",
 	"type":"object",
 	"properties": {
  		"name": { "type":"string", "_inputex": {typeInvite: "you can add a type invitation", label: 'Your name'} },
    	"born" : { "type":"string", "format":"date", "optional":true, "_inputex": {"_type": "datepicker", valueFormat: 'Y-m-d', value: '2009-01-01', label: 'Birthdate'} },
    	"gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
		"grownup": { "type": "boolean", "_inputex": { label: "Grownup?", "description": "Over 18 only"} },
		"favoritecolors": { "type": "array", "_inputex": { label: "Favorites colors", elementType: {"type": "color"} } }
  	}
 }
};

// Create the JsonSchema builder object
var builder = new inputEx.JsonSchema.Builder({
	'schemaIdentifierMap': schemaIdentifierMap,
	
	// Those options will be added on all fields
	'defaultOptions': {
		'showMsg':true
  	}
});

// Get the inputEx field definition from the "Person" object
var inputExDefinition = builder.schemaToInputEx(schemaIdentifierMap["Person"]);

// Add 'container2' as parent element
inputExDefinition.parentEl = 'container2';

// Create the form
var f = inputEx(inputExDefinition);
		</textarea>
	</div>
</div>	

	
<!-- YUI Library -->
<script type="text/javascript" src="../lib/yui/utilities/utilities.js"></script>
<script type="text/javascript" src="../lib/yui/container/container-min.js"></script>
<script type="text/javascript" src="../lib/yui/button/button-min.js"></script>
<script type="text/javascript" src="../lib/yui/calendar/calendar-min.js"></script>
<script type="text/javascript" src="../lib/yui/json/json-min.js"></script>

<!-- InputEx -->
<script src="../js/inputex.js"  type='text/javascript'></script>
<script src="../js/mixins/choice.js"  type='text/javascript'></script>
<script src="../js/Field.js"  type='text/javascript'></script>
<script src="../js/Group.js"></script>
<script src="../js/fields/CheckBox.js"></script>
<script src="../js/fields/StringField.js"></script>
<script src="../js/fields/ListField.js"></script>
<script src="../js/fields/DateField.js"></script>
<script src="../js/fields/DatePickerField.js"></script>
<script src="../js/fields/SelectField.js"></script>
<script src="../js/fields/ColorField.js"></script>
<script src="../js/fields/RTEField.js"  type='text/javascript'></script>
<script src="../js/json-schema.js"></script>

<!-- inputEx examples -->
<script src="js/dpSyntaxHighlighter.js"></script>
<script src="inputex-examples.js"></script>

 </body>
</html>